<template>
  <div class="edit-detail">
    <el-row class="name">
      <div class="title-wrap">
        <svg-icon icon-class="required" class-name="custom-class" />
        <div class="name-title">商品名称：</div>
      </div>
      <el-input v-model="info.goods_name" placeholder="请输入项目名称" class="name-input" />
    </el-row>
    <el-row class="name">
      <div class="title-wrap">
        <svg-icon icon-class="required" class-name="custom-class" />
        <div class="name-title">分类：</div>
      </div>
      <el-select v-model="info.cate_id" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.cate_id"
          :label="item.cate_name"
          :value="item.id"
        />
      </el-select>
    </el-row>
    <el-row class="name">
      <div class="title-wrap">
        <svg-icon icon-class="required" class-name="custom-class" />
        <div class="name-title">价格：</div>
      </div>
      <el-input v-model="info.price" placeholder="请输入价格" class="name-input" />
    </el-row>
    <el-row class="name">
      <div class="name-title">排序：</div>
      <el-input v-model="info.sort" placeholder="请输入排序" class="name-input" />
    </el-row>
    <el-row class="name">
      <div class="title-wrap">
        <svg-icon icon-class="required" class-name="custom-class" />
        <div class="name-title">单位：</div>
      </div>
      <el-input v-model="info.unit" placeholder="请输入单位" class="name-input" />
    </el-row>
    <el-row class="name">
      <div class="name-title">规格：</div>
      <div class="specification-container">
        <div v-for="(item, index) of info.specs" :key="index" class="specification-item">
          <div class="input-wrap">
            名称：<el-input v-model="item.spec_name" placeholder="请输入规格名称" class="name-input" @focus="handleAddSpec(index)" />
          </div>
          <div class="input-wrap">
            价钱：<el-input v-model="item.spec_price" placeholder="请输入规格价格" class="name-input" @focus="handleAddSpec(index)" />
          </div>
          <el-button v-if="index !== 0" type="primary" @click="handleDeleteSpec(index)">删除</el-button>
        </div>
      </div>
    </el-row>
    <el-row class="name">
      <div class="name-title">推荐：</div>
      <div>
        <el-tag :type="info.is_recommend === 0 ? 'info' : ''" class="tag-box" @click.stop="handleChangeRecommend">推荐</el-tag>
        <!-- <el-radio v-model="info.is_recommend" :label="1" border>
          <p >推荐</p>
        </el-radio> -->
      </div>
    </el-row>
    <el-row class="name">
      <div class="name-title">标签：</div>
      <div class="tag-item">
        <el-tag :type="info.is_discount === 0 ? 'info' : ''" class="tag-box" @click.stop="handleDiscount">折扣</el-tag>
      </div>
      <div class="tag-item">
        <el-tag :type="info.is_hot === 0 ? 'info' : ''" class="tag-box" @click.stop="handleHot">热门</el-tag>
      </div>
    </el-row>
    <el-row class="name">
      <div class="title-wrap">
        <svg-icon icon-class="required" class-name="custom-class" />
        <div class="name-title">封面图片：</div>
      </div>
      <cover :cover="info.logo" :ratio="ratio" @cover="handleCoverChange" />
    </el-row>
    <!-- <el-row class="name">
      <div class="name-title">简介：</div>
      <div class="tinymce">
        <tinymce ref="editor" v-model="info.sub_title" :height="300" />
      </div>
    </el-row> -->
    <el-row class="name">
      <el-button type="primary" class="button-submit" @click="handleSubmit">新增</el-button>
    </el-row>
  </div>
</template>
<script>
// import Carousel from '@/components/carousel'
// import Tinymce from '@/components/Tinymce'
import Cover from '@/components/cover'
import { add, classifyTag } from '@/api/product'
import { deepClone } from '@/utils/index.js'
export default {
  name: 'ProductAdd',
  components: {
    Cover
    // Tinymce
  },
  data() {
    return {
      info: {
        cate_id: '请选择',
        goods_name: '',
        sub_title: '<p>哈哈</p>',
        price: '',
        unit: '件',
        logo: '',
        sort: 0,
        is_recommend: 0,
        is_discount: 0,
        is_hot: 0,
        specs: [
          {
            spec_name: '',
            spec_price: ''
          }
        ]
      },
      options: [],
      currentIndex: 0,
      ratio: '285*230'
      // base: 'https://dev.lyk.zyuu.cn'
    }
  },
  created() {
    this.getTag()
  },
  methods: {
    // 获取标签
    async getTag() {
      const res = await classifyTag()
      const { cate } = res.data
      this.options = cate
    },
    // 改变封面
    handleCoverChange(pic) {
      this.info.logo = pic
    },
    // 改变轮播
    handleChangeCarousel(pics) {
      this.info.other_pics = pics
    },
    // 提交
    async handleSubmit() {
      const flag = this.validity()
      if (!flag) return
      const infos = deepClone({ ...this.info })
      infos.specs = JSON.stringify(this.validitySpecs(infos.specs))
      infos.cate_id = infos.cate_id === '请选择' ? '' : infos.cate_id
      await add({ ...infos })
      this.$message.success({
        message: '提交成功',
        duration: 1000
      })
      setTimeout(() => {
        this.$router.push({
          path: '/merchandise/product/productList'
        })
      }, 1000)
    },
    validitySpecs(arr) {
      for (let i = arr.length - 1; i >= 0; i--) {
        if (arr[i].spec_name.trim() === '' || arr[i].spec_price.trim() === '') {
          arr.splice(i, 1)
        }
      }
      return arr
    },
    validity() {
      const { info } = this
      if (info.goods_name.trim() === '') {
        this.$message.warning({
          message: '商品名称不能为空',
          duration: 1000
        })
        return false
      }
      if (info.cate_id === '请选择') {
        this.$message.warning({
          message: '请选择分类',
          duration: 1000
        })
        return false
      }
      if (info.price.trim() === '') {
        this.$message.warning({
          message: '价格不能为空',
          duration: 1000
        })
        return false
      }
      if (info.sort === '') {
        this.$message.warning({
          message: '排序不能为空',
          duration: 1000
        })
        return false
      }
      if (info.unit.trim() === '') {
        this.$message.warning({
          message: '单位不能为空',
          duration: 1000
        })
        return false
      }
      // if (info.specs) {
      //   const flag = info.specs.every((item, index) => {
      //     return item.spec_name.trim() !== '' && item.spec_price.trim() !== ''
      //   })
      //   if (!flag) {
      //     this.$message.warning({
      //       message: '规格的名称或价钱不能为空',
      //       duration: 1000
      //     })
      //     return false
      //   }
      // }
      if (info.logo.trim() === '') {
        this.$message.warning({
          message: '封面不能为空',
          duration: 1000
        })
        return false
      }
      if (info.sub_title.trim() === '') {
        this.$message.warning({
          message: '简介不能为空',
          duration: 1000
        })
        return false
      }
      return true
    },
    // 添加
    handleAddSpec(index) {
      const obj = { spec_name: '', spec_price: '' }
      const length = this.info.specs.length
      if (index === length - 1) {
        this.info.specs.push(obj)
      } else {
        return
      }
    },
    // 删除
    handleDeleteSpec(index) {
      this.info.specs.splice(index, 1)
    },
    // 推荐单选
    handleChangeRecommend() {
      const { is_recommend } = this.info
      console.log(is_recommend)
      this.info.is_recommend = Number(is_recommend) === 1 ? 0 : 1
    },
    handleDiscount(e) {
      const { is_discount } = this.info
      this.info.is_discount = Number(is_discount) === 1 ? 0 : 1
      if (this.info.is_discount === 1) {
        this.info.is_hot = 0
      }
    },
    // handleChangeDisCount() {
    //   const { is_discount } = this.info
    //   if (Number(is_discount) === 1) {
    //     this.info.is_discount = 0
    //   }
    // },
    // handleChangeHot() {
    //   const { is_hot } = this.info
    //   if (Number(is_hot) === 1) {
    //     this.info.is_hot = 0
    //   }
    // },
    handleHot(e) {
      const { is_hot } = this.info
      this.info.is_hot = Number(is_hot) === 1 ? 0 : 1
      if (this.info.is_hot === 1) {
        this.info.is_discount = 0
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.edit-detail{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 10px;
  z-index: 1500;
  padding: 20px;
  padding-top: 0;
  box-sizing: border-box;
  background-color: #fff;
  overflow-y: scroll;
  .name{
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .title-wrap{
      display: flex;
      width: 100px;
      position: relative;
      .custom-class{
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -15px;
      }
    }
    .name-title{
      width: 100px;
      max-width: 120px;
    }
    .name-input{
      width: 400px;
    }
  }
  .tinymce{
    width: 80%;
  }
  .button-submit{
    margin-left: 100px;
    width: 120px;
  }
  .opentime{
    width: 100%;
  }
  .opentime textarea{
    margin-left: 10px;
    width: 80%;
    line-height: 30px;
    font-size: 14px;
    padding: 20px;
    box-sizing: border-box;
    resize: none;
    height: 300px;
    max-height: 300px;
    outline: none;
    border-radius: 6px;
  }
  .specification-container{
    // display: flex;
    flex-direction: column;
    justify-content: center;
    .specification-item{
      display: flex;
      overflow: hidden;
      margin-bottom: 20px;
    }
    .name-input{
      margin-right: 20px;
    }
  }
  .input-wrap{
    display: flex;
    align-items: center;
  }
  .tag-item{
    margin-right: 20px;
  }
  .tag-box {
    width: 80px;
    cursor: pointer;
    text-align: center;
  }
}
</style>
